import { ref } from 'vue';

export const useUtils = () => {
  // 全屏
  const toggleFullScreen = () => {
    let elem = document.documentElement;
    if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.mozRequestFullScreen) { /* Firefox */
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
        elem.webkitRequestFullscreen();
      } else if (elem.msRequestFullscreen) { /* IE/Edge */
        elem.msRequestFullscreen();
      }
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) { /* Firefox */
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) { /* IE/Edge */
        document.msExitFullscreen();
      }
    }
  }
  return {
    toggleFullScreen
  }
}

// 容器加载刷新效果
export const useLoading = () => {
  const loading = ref(false)
  
  const handlePromise = (queue) => {
    loading.value = true
    let arr = queue.map(promiseItem => {
      return promiseItem()
    })
    return Promise.all(arr).finally(() => {
      loading.value = false
    })
  }

  return {
    loading,
    handlePromise
  }
}